<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png" />
    <button @click="isShow = !isShow">切换</button>
    <button @click="message = message.split('').reverse().join('')">
      修改 message
    </button>
    <p>
      <button @click="count += 1">count修改</button>
      <span>{{ count }}</span>
    </p>
    <HelloWorld v-if="isShow" :msg="message" />
    <TodoList />
  </div>
</template>

<script>
import HelloWorld from "./components/HelloWorld.vue";
import TodoList from "./components/ToDo.vue";

export default {
  name: "App",
  data() {
    return {
      message: "Welcome to My Vue World",
      isShow: true,
      count: 0,
    };
  },
  beforeCreate() {
    console.log("App beforeCreate");
  },
  created() {
    console.log("App created");
  },
  beforeMount() {
    console.log("App beforeMount");
  },
  mounted() {
    console.log("App mounted");
  },
  beforeUpdate() {
    console.log("App beforeUpdate");
  },
  updated() {
    console.log("App updated");
  },
  beforeDestroy() {
    console.log("App beforeDestroy");
  },
  destroyed() {
    console.log("App destroyed");
  },
  components: {
    HelloWorld,
    TodoList,
  },
};
</script>

<style lang="scss">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
